<!DOCTYPE html>
<html lang="en">
<head>
    <title>定时任务</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <!-- <link rel="stylesheet" href="../../css/button.css"> -->
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../libs/validator.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../../plugins/jquery-validation/jquery.validate.addMethod.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/modules/platform/My97DatePicker/WdatePicker.js"></script>

    <script src="../../libs/websocket/sockjs-0.3.min.js"></script>
    <script src="../../libs/websocket/stomp.js"></script>
    <!--<script th:src="@{../../libs/jquery.min.js}"></script>-->
    <!--<script th:src="@{../../libs/websocket/stomp.js}"></script>-->
    <!--<script th:src="@{../../libs/websocket//jquery-3.1.1.js}"></script>-->
</head>
<body>
<div id="rrapp" v-cloak>


    <div v-show="showList">
        <div class="grid-btn" style="height:34px;">
            <div class="form-group col-sm-5">
                名称:<input type="text" style="display:inline; width:100px;" class="form-control" v-model="q.name"
                          placeholder="优惠券名称">
                <a style="margin-left:10px;" class="btn btn-default" @click="query">查询</a>
            </div>

            <a v-if="hasPermission('sys:sysCoupon:update')" class="btn btn-primary" @click="update"><i
                    class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a v-if="hasPermission('sys:sysCoupon:delete')" class="btn btn-primary" @click="del"><i
                    class="fa fa-trash-o"></i>&nbsp;删除</a>


        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal" id="form">
            <div class="form-group">
                <input type="hidden" class="form-control form-tip" id="id" v-model="coupon.id"/>
                <div class="col-sm-2 control-label">优惠券名称:</div>
                <div class="col-sm-10">
                    <!--<input type="text" class="form-control" v-model="coupon.name" placeholder="优惠券名称" id="name" name="name"/>-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">优惠券金额:</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="coupon.money" placeholder="优惠券金额" id="money"
                           name="money"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">编号:</div>
                <div class="col-sm-10">
                    <input type="text" readonly="readonly" class="form-control" v-model="coupon.code" placeholder="编号"
                           id="code" name="code"/>
                </div>
            </div>
            <!-- <div class="form-group">
                   <div class="col-sm-2 control-label">到期时间:</div>
                   <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="coupon.validity" placeholder="到期时间"  id="" name=""/>
                </div>
            </div> -->
            <div class="form-group">
                <div class="col-sm-2 control-label">到期时间</div>
                <div class="col-sm-10">
                    <input v-model="coupon.validity" id="validity" name="validity" type="text"
                           onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss',minDate: '%y-%M-%d 00:00:00'})">
                    <font color=red>点我弹出日期控件</font>

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" onclick="upd()" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>
<script src="../../js/modules/test/testlist.js"></script>
<script type="text/javascript">
    function validform() {
        /*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
        return $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                money: {
                    required: true,
                    money: true
                }


            },
            messages: {
                name: {
                    required: '优惠券名必填',
                    minlength: '最少输入2个字符',
                    maxlength: '最多输入10个字符',
                },
                money: {
                    required: "优惠券金额必须填写"
                }

            }
        });
    }
    //注册表单验证
    $(validform());
    function upd() {
        if (validform().form()) {
            var id = $("#id").val();
            var name = $("#name").val();
            if (isBlank(name)) {
                alert("优惠券名称必须填写")
                return;
            }
            var money = $("#money").val();
            if (isBlank(money)) {
                alert("优惠券金额必须填写")
                return;
            }
            var SysUser = {"name": name, "money": money, "code": code};
            var validity = $("#validity").val();
            if (isBlank(validity)) {
                alert("到期时间必须填写")
                return;
            }
            var code = $("#code").val();
            if (isBlank(code)) {
                alert("交易平台编码必须填写")
                return;
            }
            $.ajax({
                type: "post",
                url: baseURL + 'sys/test/update',
                data: {"id": id, "name": name, "money": money, "code": code, "alidity": validity},
                success: function (r) {
                    if (r.code == 0) {
                        alert('操作成功', function () {
                            window.location.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                },
            });
        } else {
            alert("请按照提示正确填写信息!");
        }
    }
</script>

<div>
    <div>
        <button id="connect" onclick="websocketConfig();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>

    <div id="conversationDiv">
        <label>登录者</label><input type="text" id="sendMemId"/>
        <label>接受者</label><input type="text" id="reciveMemId"/>
        <label>消息</label><input type="text" id="content"/>
        <button id="sendName" onclick="sendMessage();">发送</button>
        <p id="response"></p>
    </div>
</div>

<script type="text/javascript">
    var stomp, sock;
    //websocket配置
    function websocketConfig() {
        //连接url为endpointChat的endpoint,对应后台WebSoccketConfig的配置
        sock = new SockJS("/contactChatSocket");
        sockHandle();
        stompConfig();
    }
    function stompConfig() {
        //使用STOMP子协议的websocket客户端
        stomp = Stomp.over(sock);
        var accountId=$("#sendMemId").val();
        stomp.connect({accountId: accountId}, function (frame) {
            //这里的订阅地址和controller的convertAndSendToUser地址一致，多出的user必须的，指的是用户之间发送消息
            //这里的地址和后台的Controller sendChatMsg方法的chatAddress 一致
            stomp.subscribe("/user/"+accountId+"/queue/contactMessage", function (message) {
                //处理响应消息
                var json = JSON.parse(message.body);
                console.log(json);
                alert(message.body);
            });

            //订阅处理错误的消息地址,接收错误消息
            stomp.subscribe("/user/"+accountId+"/queue/contactErrors", function (message) {
                var response = JSON.parse(message.body);
                var error = response.error;
                alert("发送失败" + error);
            });
        });
    }

    //发送消息
    function sendMessage() {
        //文本框的内容
        var content = $("#content").val();
        if ($.trim($("#content").val()).length <= 0) {
            return;
        }
        //拼接成json传到后台
        var data = {
            sendMemId: $("#sendMemId").val(),
            reciveMemId: $("#reciveMemId").val(),
            msgContent: content,
            msgType: 1
        };
        //发送
        stomp.send("/sendChatMsg", {}, JSON.stringify(data));
    }


    function sockHandle() {
        sock.onopen = function () {
            alert("------连接成功------");
        };
        sock.onmessage = function (event) {
            alert('-------Received: ' + event.data);
        };
        sock.onclose = function (event) {
            alert('--------Info: connection closed.------');
        };
        //连接发生错误
        sock.onerror = function () {
            alert("连接错误", "网络超时或通讯地址错误.");
            disconnect();
        };
    }


    //关闭websocket
    function disconnect() {
        if (sock != null) {
            sock.close();
            sock = null;
        }
    }
</script>
</body>
</html>